<template>
  <view class="page">
    <view class="form">
      <view class="form-item">
        <text class="label">收货人</text>
        <input 
          class="input" 
          v-model="form.contactName" 
          placeholder="请输入收货人姓名"
          maxlength="20"
        />
      </view>
      
      <view class="form-item">
        <text class="label">手机号</text>
        <input 
          class="input" 
          v-model="form.contactPhone" 
          placeholder="请输入手机号"
          type="number"
          maxlength="11"
        />
      </view>
      
      <view class="form-item">
        <text class="label">宿舍楼</text>
        <input 
          class="input" 
          v-model="form.building" 
          placeholder="请输入宿舍楼栋"
          maxlength="20"
        />
      </view>
      
      <view class="form-item">
        <text class="label">房间号</text>
        <input 
          class="input" 
          v-model="form.room" 
          placeholder="请输入房间号"
          maxlength="20"
        />
      </view>
      
      <view class="form-item full">
        <text class="label">详细地址</text>
        <textarea 
          class="textarea" 
          v-model="form.detail" 
          placeholder="如楼栋、门牌号等详细信息"
          maxlength="200"
        ></textarea>
      </view>
      
      <view class="form-item switch-item">
        <text class="label">设为默认地址</text>
        <switch :checked="form.isDefault === 1" @change="toggleDefault" color="#667eea"/>
      </view>
    </view>
    
    <view class="btn-save" @click="saveAddress">
      <text class="btn-text">保存</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      addressId: null,
      form: {
        contactName: '',
        contactPhone: '',
        building: '',
        room: '',
        detail: '',
        isDefault: 0
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.addressId = options.id
      this.loadAddressDetail()
      uni.setNavigationBarTitle({
        title: '编辑地址'
      })
    } else {
      uni.setNavigationBarTitle({
        title: '新增地址'
      })
    }
  },
  methods: {
    async loadAddressDetail() {
      try {
        const { getAddressDetail } = require('@/api/address')
        const address = await getAddressDetail(this.addressId)
        
        // 解析地址
        this.form = {
          contactName: address.contactName || '',
          contactPhone: address.contactPhone || '',
          building: address.building || '',
          room: address.room || '',
          detail: address.detail || '',
          isDefault: address.isDefault || 0
        }
      } catch (error) {
        console.error('加载地址详情失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      }
    },
    
    toggleDefault(e) {
      this.form.isDefault = e.detail.value ? 1 : 0
    },
    
    async saveAddress() {
      // 校验
      if (!this.form.contactName) {
        uni.showToast({ title: '请输入收货人姓名', icon: 'none' })
        return
      }
      
      if (!this.form.contactPhone || !/^1[3-9]\d{9}$/.test(this.form.contactPhone)) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
        return
      }
      
      if (!this.form.building) {
        uni.showToast({ title: '请输入宿舍楼栋', icon: 'none' })
        return
      }
      
      if (!this.form.room) {
        uni.showToast({ title: '请输入房间号', icon: 'none' })
        return
      }
      
      try {
        uni.showLoading({ title: '保存中...' })
        
        const { saveAddress } = require('@/api/address')
        
        const params = {
          contactName: this.form.contactName,
          contactPhone: this.form.contactPhone,
          building: this.form.building,
          room: this.form.room,
          detail: this.form.detail,
          isDefault: this.form.isDefault
        }
        
        if (this.addressId) {
          params.id = this.addressId
        }
        
        await saveAddress(params)
        
        uni.hideLoading()
        
        uni.showToast({
          title: '保存成功',
          icon: 'success'
        })
        
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } catch (error) {
        console.error('保存地址失败:', error)
        uni.showToast({
          title: error.message || '保存失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 20rpx;
}

.form {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 40rpx;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 28rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  
  &.full {
    flex-direction: column;
    align-items: flex-start;
  }
  
  &.switch-item {
    justify-content: space-between;
  }
  
  &:last-child {
    border-bottom: none;
  }
}

.label {
  font-size: 28rpx;
  color: #333;
  width: 160rpx;
  flex-shrink: 0;
}

.input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.textarea {
  width: 100%;
  min-height: 120rpx;
  font-size: 28rpx;
  color: #333;
  margin-top: 20rpx;
}

.btn-save {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  height: 88rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .btn-text {
    font-size: 28rpx;
    color: #fff;
    font-weight: bold;
  }
}
</style>
